<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
	        padding: 0;
	        margin: 0;
	        width: 100%;	
	        height: 100%;	
	        position: absolute;	
	        left: 0;top: 0;	
	        overflow: hidden;
        }
      *{
            margin: 0;
            padding: 0;
        }
        .header{
            background: rgb(38, 116, 233);
            overflow: hidden;
        }
        .header span{
            display: block;
            font-size: 30px;
            margin: 8px;
            color: white;
        }
        .header input{
            display: block;
            width: 90%;
            height: 30px;
            text-align: center;
            outline: none;
            margin-left: 10px;
            margin-bottom: 10px;
            border-radius: 20px;
        }
        .banner{
            height: 100px;
        }
        .banner img{
            display: block;
            width: 94%;
            margin: auto;
            margin-top: 10px;
        }
        h3{
            margin-left: 10px;
            margin-bottom: 10px;
        }
        #hobby{
            height: 40px;
            display: flex;
            text-align: center;
        }
        #hobby span{
            line-height: 40px;
            width: 25%;
            height: 100%;
        }
        /* span.active{
            font-weight: bold;
        } */
        #data span{
            display: inline-block;
            margin: 6px;
            padding: 5px;
            border-radius: 4px;
            background: rgb(209, 207, 207);
        }
        .box{
            height: 100px;
            margin: 10px 0;
        }
        .box img{
            margin: 5px;
            float: left;
            width: 80px;
        }
        .box h3{
            /* float: left; */
            padding:5px 10px;
        }
        .box span{
            font-size: 14px;
            float: left;
            margin:0 10px;
        }
        .box .score{
            color: orangered;
        }
        .box p{
            float: left;
            margin:0 10px;
        }

        #footer{
            height: 60px;
            display: flex;
            text-align: center;
            border-top: 1px solid #999;
        }
        .dv{
            flex-grow: 1;
        }
        .dv img{
            margin:10px auto;
            display: block;
            height: 40px;
        }
        .div span{
            display: block;
        }
    </style>
</head>
<body>
    <div class="header">
        <span>饿了么</span>
        <input type="text" placeholder="输入商家、商品名称">
    </div>
    <div class="banner">
        <img src="./img/banner.jpg" alt="">
    </div>
    <h3>猜你喜欢</h3>
    <div id="hobby">
        <span :style="{fontWeight:currentIndex == index?'bold':''}" @click="handleClick(index)" v-for="(item,index) in arr">{{item}}</span>
        <!-- <span :class="{active:currentIndex == index}" @click="handleClick(index)" v-for="(item,index) in arr">{{item}}</span> -->
    </div>
    <div id="data">
        <span v-for="(item,index) in arr">{{item}}</span>
    </div>
    <div id="list">
        <div class="box" v-for="(item,index) in arr">
            <img :src="item.pic" alt="">
            <h3>{{item.name}}</h3>
            <span class="score">评分：{{item.score}}</span>
            <span>月售：{{item.sum}}</span>
            <br>
            <p>起送￥{{item.start}}</p>
            <p>远距离配送￥{{item.space}}</p>
        </div>
    </div>


    <div id="footer">
        <div class="dv" :style="{color:currentIndex == index?'blue':''}" @click="handleClick(index)" v-for="(item,index) in arr">
            <img :src="item.pic" alt="">
            <span class="name">{{item.name}}</span>
        </div>
    </div>
    <script src="vue.js"></script>
    <script src="猜你喜欢.js"></script>
    <script src="年货热卖.js"></script>
    <script src="店铺.js"></script>
    <script src="底部首页.js"></script>
</body>
</html>